<template>
    <div class="Results">
        <div class="start">
            <h2>作品案列</h2>
            <div class="line_start"></div>
            <p>用技术与专注，将作品通过艺术和技术的结合，打造精品案例。</p>
        </div>
        <div class="navResults" @click="clickResult(0)">
            <a href="javascript:void(0)" @click="clickResult(1)"  :class="{onchanged:changed===1}">网站建设</a>
            <a href="javascript:void(0)" @click="clickResult(2)"  :class="{onchanged:changed===2}">营销传播</a>
            <a href="javascript:void(0)" @click="clickResult(3)"  :class="{onchanged:changed===3}">形象策略</a>
            <a href="javascript:void(0)" @click="clickResult(4)"  :class="{onchanged:changed===4}">影像大片</a>
        </div>
        <div class="resultsMain">
            <div class="over">
                <div class="resultsUl" v-for="(item,index) in newContent" :key="index">
                    <a :href="item.link" class="imgAlink">
                        <img :src="item.imgUrl" alt="">
                    </a>
                    <div class="title">
                        {{item.title}}
                        <span><i>{{item.num}}</i></span>
                    </div>
                </div>
            </div>
            <div class="num">
                <span>共<b>1</b>页<b>{{numResult}}</b>条记录</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Results",
        data(){
            return{
                contentImg:[
                    {
                        imgUrl:require('../../assets/cases1.png'),
                        title:'钉钉报表小程序',
                        num:'7345',
                        link:'/#/item/1'
                    },
                    {
                        imgUrl:require('../../assets/cases2.png'),
                        title:'GScloud云控平台',
                        num:'8895',
                        link:'/#/item/2'
                    },
                    {
                        imgUrl:require('../../assets/case3.jpg'),
                        title:'素绽雪电商服务平台',
                        num:'9956',
                        link:'/#/item/3'
                    },
                    {
                        imgUrl:require('../../assets/cases4.jpg'),
                        title:'计算机文化报名系统',
                        num:'5697',
                        link:'/#/item/4'
                    },

                ],
                newContent:[],
                numResult:0,
                changed:0,
            }
        },
        created() {
            var id=parseInt(this.$route.params["id"]);
            this.clickResult(id)
            // console.log(typeof (id));
        },
        methods:{
            clickResult(id){
                var test=[];
                this.changed=id;
                event.stopPropagation();
                // console.log(this.changed);
                if(id===0){
                    this.newContent=this.contentImg;
                    this.numResult=this.newContent.length;
                }else if(id===1){
                    test.push(this.contentImg.slice(-1));
                    this.newContent=test["0"];
                    this.numResult=this.newContent.length;
                    // console.log(this.newKnowledge);
                }else if(id===2){
                    test.push(this.contentImg.slice(1,3));
                    this.newContent=test["0"];
                    this.numResult=this.newContent.length;

                }else if(id===3){
                    test.push(this.contentImg.slice(0,1));
                    this.newContent=test["0"];
                    this.numResult=this.newContent.length;
                }else if(id===4){
                    this.newContent=test;
                    this.numResult=0;
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .Results{
        width: 100%;
        box-sizing: border-box;
        min-width: 1300px;
        .start{
            box-sizing: border-box;
            height: 400px;
            padding: 150px 170px;
            background: url("../../assets/case/h-top-3.jpg") no-repeat;
            background-size: 100% 100%;
            h2{
                color: white;
                font-size: 30px;
                font-weight: 400;
                margin-bottom: 15px;
            }
            .line_start{
                height: 2px;
                background: #0595C7;
                width: 70px;
            }
            p{
                color: white;
                opacity: .8;
            }
        }
        .navResults{
            width: 450px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
            margin: 0 auto;
            a{
                /*height: 70px;*/
                height: 35px;
                display: block;
                line-height: 35px;
                color: #666666;
                width: 80px;
                text-align: center;
                transition: .3s ease-in-out;
                &:hover{
                    background: #0595C7 !important;
                    color: white !important;
                }

            }
        }
        .resultsMain{
            background: #F1F1F1;
            box-sizing: border-box;
            padding: 50px 200px;
            padding-bottom: 0;
            overflow: auto;
            .over{
                overflow: auto;
            }
            .resultsUl{
                width: 27%;
                float: left;
                margin-right: 45px;
                box-sizing: border-box;
                height: 300px;
                .imgAlink{
                    display: block;
                    overflow: hidden;
                    img{
                        width: 100%;
                        height: 200px;
                        display: block;
                        transition: ease-in-out .5s;
                        &:hover{
                            transform: scale(1.2);
                        }
                    }
                }
                .title{
                    height: 40px;
                    background: white;
                    line-height: 30px;
                    padding: 5px 10px;
                    box-sizing: border-box;
                    font-size: 14px;
                    color: #aaaaaa;
                    span{
                        float: right;
                        padding-left: 20px;
                        background: url("../../assets/case/see.png") no-repeat left;

                    }
                }
            }
            .num{
                padding: 30px 0;
                height: 30px;
                span{
                    display: block;
                    width: 100px;
                    height: 25px;
                    line-height: 25px;
                    background: white;
                    font-size: 13px;
                    color: #aaaaaa;
                    margin: 0 auto;
                    text-align: center;
                    border: 1px solid #cccccc;
                }

            }

        }
    }
    .onchanged{
        background: #0595C7 !important;
        color: white !important;
    }


</style>
